<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
		<script type="text/javascript" language="javascript" src="../../jqGrid/js/jquery-latest.js"></script>
		
		<link rel="stylesheet" type="text/css" media="screen" href="../../jqGrid/css/blitzer/jquery-ui-1.8.1.custom.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="../../jqGrid/css/ui.jqgrid.css" />
 
		<script src="../../jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
		<script src="../../jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
		<style>
		html, body {
		    margin: 0;
		    padding: 0;
		    font-size: 100%;
		}
		</style>
 

<script type="text/javascript">

$(document).ready(function(){
  $("#list").jqGrid({
    url:'http://localhost/tmvmpls/branch/index.php/table/xmldata?count=30',
	datatype: "xml",
	mtype: 'GET',
   	colNames:['TIMESTAMP','EIP', 'OBJ','IFINOCTETS','IFOUTOCTETS','TIMESTAMP','EIP', 'OBJ','IFINOCTETS','IFOUTOCTETS', 'OBJ','IFINOCTETS','IFOUTOCTETS','OBJ','IFINOCTETS','IFOUTOCTETS'],
   	colModel:[
   		{name:'id',index:'id'},
   		{name:'id',index:'id1'},
   		{name:'id',index:'id2'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id3'},
		{name:'id',index:'id'},
   		{name:'id',index:'id1'},
   		{name:'id',index:'id2'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id2'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id2'},
   		{name:'id',index:'id3'},
   		{name:'id',index:'id3'},

   	],
   	rownumbers: true, 
    rownumWidth:35,
   	rowNum: 15,
   	autowidth: false,
   	rowList:[10,20,30],
   	sortname: 'id',
   	height: 350,
   	pager : '#pager',
    viewrecords: true,
    sortorder: "desc",
    caption:"Advancr Query"
}).navGrid('#pager',{edit:false,add:false,del:false});	
}); 


</script>
 
</head>

<body>
	<table id="list"></table> 
	<div id="pager"></div> 
</body>
</html>